<template>
    <div class="configuredRule">
      <el-card shadow="hover" class="card-search">
        <el-row>
          <el-col :span="20">
            <div class="search_detail">
              <div class="search">
                <span class="span_name">名称：</span>
                <el-input v-model="state.params.realName" placeholder="请输入" clearable />
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
            <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="hover" class="card-main">
        <el-button type="primary" :icon="CirclePlusFilled" @click="addmore">新增</el-button>
        <div class="lists">
          <div class="list">
            <div class="lists-img">
              <img :src="require('@@/world.png')" alt="">
            </div>
            <div class="list-block1">
              <div class="list-txt1">名称：</div>
              <div class="list-block2">
                <span class="list-txt2">上传时间：</span>
                <el-button type="danger" :icon="Delete" circle @click="DeletetPdf" />
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination background @current-change="changepage" layout="prev, pager, next" :total="state.totalPage" />
        </div>
      </el-card>
      <el-dialog :close-on-click-modal="false" v-model="state.dialogVisible" title="文档编辑" width="80%"
        :before-close="handleClose">
        <div class="inputa">
          <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
              :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
              :mode="mode" @onCreated="handleCreated" />
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm()">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  
  import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { Delete, Search, CirclePlusFilled } from '@element-plus/icons-vue'
  // import { ElMessage, ElMessageBox } from 'element-plus'
  
  const state = reactive({
    dialogVisible: false,
    dialogVisibleBjkb: true,
    params: {
      monthStatus: '',
      realName: '',
      roleId: '',
      time: ['', ''],
      startDate: '',
      endDate: '',
    },
  })
  
  
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()
  
  // 内容 HTML
  const valueHtml = ref('<p>hello</p>')
  
  // 模拟 ajax 异步获取内容
  onMounted(() => {
    setTimeout(() => {
      valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    }, 1500)
  })
  
  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        server: 'http://60.174.207.65:9999/api/upload',
        headers: { Authorization: '9pOpepPbh89EvnD+fovZ61J6HsGHkS8TNBQIBwDb24eel8XvOPIde9ssvYCWlK2CoiHrNnse5JWSkys13yDf+xbIDrMZx1LzKlVwAEacILuS0xtetdtiQtV06EbVBVjA3lEzoDuoiViZ+syT05gPEusHthH1veQVmSEPKTVwIy9JnbIMkik+7NqKnkrV5HcWBKLNPQCOL1mZScp92elFgDunUBpOfL4eHiWHOOKWsZNrKiOOBFmPtFLlL51iidGBSxhU3LKvGZR4xOXxBtYIHyMi89pbR/F3dRUl8Mt3e9ASEwtgrdM+isuytZBYVp7mKKUWDHEOW8VmYJiU5IFQrJfirb7yZbbOT8HTPRoHi2FFV4AtkHStqsMGGT0Kml7o5hj17+uC19hneK2Gdk/wp5yyZWc4RQG+9op4DUckOneNC3UBwpwTW2i7/wk4Nt1Kf5bIMOBCbs7PfeyPGRLBO3WT2GkWbV1IMP3nEDDnHAO1F93bk8HBCwAFx6/iMa0lXAviYGyikAh6oBfDWubFekvZB32FT7/gQCR5iBzfJIZWu8IfKi86ENfLFXKOkDFiWUFrcpBfNgS314dqkzZk/bFPGepY8iazmeqNXjjxBZaoVnHfCRx1JCIVsGLZ3xPvjOSFyLQp0d1LZOIHe7ofTKTKskXORqn+nvMjuqKZe+oCwuyDpcOXLT6CM5K8XB9TZPkbPjca0RkmRr3y9cA6dH0BJ084KbRRyOl8OZ5amD0aAAlJ2eJeruq9IKfcNKhfez0jl56g8ZYQUgL4V51OYSnIlkGZyHJpkUXqWPuLMS7AOawziCazdyUXk+nP7lOdfpE/IqWBteptTrhvBQblKLuCFL3wQuEMHXSkcwZ5XG4pKsFTNCtOt45PX/LE7rAUNeGJrzLSHswyLho4zOyuLQ==' },
        fieldName: 'file',// 这里有个坑，如果返回的响应结果是没有上传文件，跟这里关系很大
        customInsert(res, insertFn) {
          if (res.code == 200) {
            let { url, alt, href } = res.data
            insertFn(url, alt, href)
          }
        }
      },
      uploadVideo: {
        server: 'http://60.174.207.65:9999/api/upload',
        headers: { Authorization: '9pOpepPbh89EvnD+fovZ61J6HsGHkS8TNBQIBwDb24eel8XvOPIde9ssvYCWlK2CoiHrNnse5JWSkys13yDf+xbIDrMZx1LzKlVwAEacILuS0xtetdtiQtV06EbVBVjA3lEzoDuoiViZ+syT05gPEusHthH1veQVmSEPKTVwIy9JnbIMkik+7NqKnkrV5HcWBKLNPQCOL1mZScp92elFgDunUBpOfL4eHiWHOOKWsZNrKiOOBFmPtFLlL51iidGBSxhU3LKvGZR4xOXxBtYIHyMi89pbR/F3dRUl8Mt3e9ASEwtgrdM+isuytZBYVp7mKKUWDHEOW8VmYJiU5IFQrJfirb7yZbbOT8HTPRoHi2FFV4AtkHStqsMGGT0Kml7o5hj17+uC19hneK2Gdk/wp5yyZWc4RQG+9op4DUckOneNC3UBwpwTW2i7/wk4Nt1Kf5bIMOBCbs7PfeyPGRLBO3WT2GkWbV1IMP3nEDDnHAO1F93bk8HBCwAFx6/iMa0lXAviYGyikAh6oBfDWubFekvZB32FT7/gQCR5iBzfJIZWu8IfKi86ENfLFXKOkDFiWUFrcpBfNgS314dqkzZk/bFPGepY8iazmeqNXjjxBZaoVnHfCRx1JCIVsGLZ3xPvjOSFyLQp0d1LZOIHe7ofTKTKskXORqn+nvMjuqKZe+oCwuyDpcOXLT6CM5K8XB9TZPkbPjca0RkmRr3y9cA6dH0BJ084KbRRyOl8OZ5amD0aAAlJ2eJeruq9IKfcNKhfez0jl56g8ZYQUgL4V51OYSnIlkGZyHJpkUXqWPuLMS7AOawziCazdyUXk+nP7lOdfpE/IqWBteptTrhvBQblKLuCFL3wQuEMHXSkcwZ5XG4pKsFTNCtOt45PX/LE7rAUNeGJrzLSHswyLho4zOyuLQ==' },
        fieldName: 'file',// 这里有个坑，如果返回的响应结果是没有上传文件，跟这里关系很大
        customInsert(res, insertFn) {
          if (res.code == 200) {
            let { url, alt, href } = res.data
            insertFn(url, alt, href)
          }
        }
      }
    }
  }
  
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
  
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
  
  const addmore = () => {
    state.dialogVisible = true
  }
  
  const resetForm = () => {
    state.dialogVisible = false
  }
  
  </script>
  
  <style lang="scss">
  .index-content {
    padding: 0 30px;
    margin-top: 30px;
  }
  
  
  
  
  
  .demo-pagination-block {
    margin: 30px 0;
  }
  
  .el-form-item__label {
    //  width: 68px;
    text-align: start;
  }
  
  .configuredRule {
    padding: 20px;
  
    .search_detail {
      display: flex;
  
      .search {
        margin-right: 10px;
        display: flex;
        align-items: center;
  
        .span_name {
          width: 110px;
          font-size: 16px;
        }
      }
    }
  
    .card-main {
      margin-top: 20px;
      height: calc(100vh - 200px);
      position: relative;
  
      .pagination {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        text-align: right;
      }
    }
  }
  
  :deep(.el-calendar__body) {
    height: 100%;
  }
  
  :deep(.el-calendar-table) {
    height: 100%;
  }
  
  :deep(.el-calendar-day) {
    height: 100%;
  }
  
  .lists {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  
    .list {
      margin: 8px 1%;
      padding: 5px 5px;
      width: 230px;
      height: 230px;
      background: #F8F8F8;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #EAEAEA;
    }
  
    .lists-img {
      text-align: center;
      width: 100%;
      height: 127px;
      background: #FFFFFF;
      border-radius: 5px 5px 0px 0px;
  
      img {
        width: 88px;
      }
    }
  
    .list-block1 {
      margin-top: 5px;
      width: 100%;
      // height: 127px;
      background: #FFFFFF;
      border-radius: 5px 5px 0px 0px;
      padding: 5px 10px;
  
      .list-txt1 {
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
  
      .list-block2 {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
  
        .list-txt2 {
          font-size: 12px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #A1A1A1;
        }
      }
    }
  
  
  }
  </style>